<!--
 * @Autor: Kadia
 * @Date: 2021-07-01 10:00:22
 * @LastEditors: Kadia
 * @Connect: nefukadia@foxmail.com
 * @LastEditTime: 2021-07-01 15:12:54
-->
<template>
    <div>
        <div class="min-div">
            <div style="font-size:30px;color:#11b24e;text-align:center; padding:50px;text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px;">
                林大干饭人诚邀您的加盟
            </div>
            <el-form style="width:40%;margin:0 auto;" ref="form" :model="form" label-width="80px" size="medium">
                <el-form-item label="商家名称" prop="shopName">
                    <el-input v-model="form.shopName" placeholder="用于展示给用户"></el-input>
                </el-form-item>
                <el-form-item label="登录邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="一个邮箱只能注册一次"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入登录密码"></el-input>
                </el-form-item>
                <el-form-item label="商家头像" prop="image">
                    <el-upload :action="action" ref="upload" :show-file-list="false"
                    :on-success="upLoad" accept="image/jpeg,image/png">
                        <img v-if="form.imageUrl!='#'" :src="form.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="联系电话" prop="tel">
                    <el-input v-model="form.tel" type="number" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="店家地址" prop="address">
                    <el-input v-model="form.address" placeholder="请输入店家地址"></el-input>
                </el-form-item>
                <el-form-item label="起送价格" prop="reach">
                    <el-input-number step-strictly v-model="form.reach" :min="1" ></el-input-number>
                </el-form-item> 
            </el-form>
            <div style="text-align:center;">
                <el-button class="botton" type="primary" @click="onSubmit" v-loading="submit">提交审核表</el-button>
            </div>
        </div>
        <my-footer></my-footer>
    </div>
</template>
<script>
export default {
    data(){
        return {
            action:this.myConfig.manageApiUrl+'/upload.php',
            form:{
                imageUrl:'#',
                reach:1
            },
            submit:false
        }
    },
    methods: {
        upLoad(res) {
            const that=this;
            console.log(res.url);
            that.form.imageUrl=res.url;
        },
        onSubmit(){
            const that=this;
            if(!that.form.hasOwnProperty('shopName')||!that.form.hasOwnProperty('email')||
            !that.form.hasOwnProperty('password')||!that.form.hasOwnProperty('tel')||
            !that.form.hasOwnProperty('address')||that.form.imageUrl=='#'){
                that.$message.warning('请完善表格信息');
                return ;
            }
            let isEmail = /^\w+\@+[0-9a-zA-Z]+\.(com|com.cn|edu|hk|cn|net)$/;
            if (!isEmail.test(that.form.email)){
                that.$message.warning('邮箱格式不正确');
                return ;
            }
            that.submit=true;
            that.$axios({
                url:that.myConfig.manageApiUrl+'/addShop.php',
                method:'POST',
                data:{
                    form:that.form
                }
            }).then(function(res){
                that.submit=false;
                if(res.data.errCode==200){
                    that.$message.success('商家注册成功，快去登陆吧');
                    setTimeout(function(){
                        that.$router.push({
                            name:'Login'
                        });
                    }, 1500);
                }else{
                    that.$message.warning('邮箱已被注册');
                }
            }).catch(function(err){
                that.$message.warning('系统繁忙，请稍后再试');
            })
        }
    }
}
</script>
<style scoped>
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border: 1px solid #c1c1c1;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>